.x-selectable {
  // 一般状态
  .reset-component;

  position: relative;
  top: -0.09em;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  outline: none;
  cursor: pointer;

  &-wrapper:hover &-inner,
  &:hover &-inner,
  &-input:focus + &-inner {
    border-color: @checkbox-color;
  }

  &-checked::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid @checkbox-color;
    border-radius: @border-radius-sm;
    visibility: hidden;
    animation: checkboxEffect 0.36s ease-in-out;
    animation-fill-mode: both;
    content: '';
  }

  &:hover::after,
  &-wrapper:hover &::after {
    visibility: visible;
  }

  &-inner {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: @checkbox-size;
    height: @checkbox-size;
    background-color: @checkbox-check-color;
    border: @checkbox-border-width @border-style-base @border-color-base;
    border-radius: @border-radius-sm;
    // Fix IE checked style
    // https://github.com/ant-design/ant-design/issues/12597
    border-collapse: separate;
    transition: all 0.3s;

    &::after {
      @check-width: (@checkbox-size / 14) * 5px;
      @check-height: (@checkbox-size / 14) * 8px;

      position: absolute;
      top: 50%;
      left: 21%;
      display: table;
      width: @check-width;
      height: @check-height;
      border: 2px solid @checkbox-check-color;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg) scale(0) translate(-50%, -50%);
      opacity: 0;
      transition: all 0.1s @ease-in-back, opacity 0.1s;
      content: ' ';
    }
  }

  &-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
  }

  // 选中状态
  &-checked &-inner::after {
    position: absolute;
    display: table;
    border: 2px solid @checkbox-check-color;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(1) translate(-50%, -50%);
    opacity: 1;
    transition: all 0.2s @ease-out-back 0.1s;
    content: ' ';
  }

  &-checked &-inner {
    background-color: @checkbox-color;
    border-color: @checkbox-color;
  }

  &-disabled {
    cursor: not-allowed;

    & + span {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }
  &-disabled&-checked &-inner::after {
    border-color: @disabled-color;
    animation-name: none;
  }
  &-disabled &-input {
    cursor: not-allowed;
  }
  &-disabled &-inner {
    background-color: @input-disabled-bg;
    border-color: @border-color-base !important;
    &::after {
      border-color: @input-disabled-bg;
      border-collapse: separate;
      animation-name: none;
    }
  }
  &-wrapper {
    .reset-component;

    display: inline-block;
    line-height: unset;
    cursor: pointer;
    & + & {
      margin-left: 8px;
    }
  }
  &-wrapper + span,
  & + span {
    padding-right: 8px;
    padding-left: 8px;
  }

  &-group {
    .reset-component;

    display: inline-block;
    &-item {
      display: inline-block;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    &-item + &-item {
      margin-left: 0;
    }
  }

  &-indeterminate {
    .x-selectable-inner {
      background-color: #fff;
      border-color: @border-color-base;
    }
    .x-selectable-inner::after {
      @indeterminate-width: @checkbox-size - 8px;
      @indeterminate-height: @checkbox-size - 8px;

      top: 50%;
      left: 50%;
      width: @indeterminate-width;
      height: @indeterminate-height;
      background-color: @checkbox-color;
      border: 0;
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      content: ' ';
    }

    &.x-selectable-disabled .x-selectable-inner::after {
      background-color: @disabled-color;
      border-color: @disabled-color;
    }
  }
}

@keyframes checkboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}